<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../normalize.css">
    <title>多行垂直居中-table2</title>
</head>
<body>
    <style type="text/CSS">
        .mb10{margin-bottom:10px}
        .wrap{background:#000; width:800px;
        color:#fff;margin-bottom:10px;height:300px;display:table-cell;vertical-align:middle;*position:relative}
        .test{width:300px;height:50px;background:red}
        .verticalWrap{*position:absolute;*top:50%}
        .vertical{*position:relative;*top:-50%}
    </style>
    <div class="mb10">
        <div class="wrap">
            <div class="verticalWrap">
                <div class="vertical">
                    hello world<br />
                    hello world<br />
                    hello world
                </div>
            </div>
        </div>
    </div>
    <div class="mb10">
        <div class="wrap">
            <div class="verticalWrap">
                <img src="https://www.baidu.com/img/bd_logo1.png?where=super" class="vertical" />
            </div>
        </div>
    </div>
    <div class="mb10">
        <div class="wrap">
            <div class="verticalWrap">
                <div class="test vertical"></div>
            </div>
        </div>
    </div>
</body>
</html>